<template>
	<view class="">
		<!-- <uni-nav-bar color="#333" @clickLeft="leftFun" :border="false" left-icon="left" backgroundColor="#fff"
			title="药品详情"></uni-nav-bar> -->

		<!--pages/drugDetail/drugDetail.wxml-->
		<view class="medicine-detail">
			<!-- <image class="medicine-image" src="{{medicine.imgUrl}}" mode="aspectFit" /> -->
			<view class="info-section">
				<text class="medicine-name">{{medicine.name}}</text>
				<text class="price price-text-color"><text class="item-title">价格：</text>￥{{medicine.salePrice}}</text>
				<view v-if="medicine.ingredients">
					<view class="item-title">【成分】</view>
					<rich-text class="item-content" :nodes="medicine.ingredients"></rich-text>
				</view>
				<view v-if="medicine.description">
					<view class="item-title">【性状】</view>
					<text class="item-content">{{medicine.description}}</text>
				</view>
				<view v-if="medicine.indications">
					<view class="item-title">【适应症】</view>
					<text class="item-content">{{medicine.indications}}</text>
				</view>
				<view v-if="medicine.spec">
					<view class="item-title">【规格】</view>
					<rich-text class="item-content" :nodes="medicine.spec"></rich-text>
				</view>
				<view v-if="medicine.useDos">
					<view class="item-title">【用法用量】</view>
					<rich-text class="item-content" :nodes="medicine.useDos"></rich-text>
				</view>
				<view v-if="medicine.adverseReactions">
					<view class="item-title">【不良反应】</view>
					<rich-text class="item-content" :nodes="medicine.adverseReactions"></rich-text>
				</view>
				<view v-if="medicine.contraindications">
					<view class="item-title">【禁忌】</view>
					<rich-text class="item-content" :nodes="medicine.contraindications"></rich-text>
				</view>
				<view v-if="medicine.notice">
					<view class="item-title">【注意事项】</view>
					<rich-text class="item-content" :nodes="medicine.notice"></rich-text>
				</view>
				<view v-if="medicine.pregnantUse">
					<view class="item-title">【孕妇及浦乳期妇女用药】</view>
					<rich-text class="item-content" :nodes="medicine.pregnantUse"></rich-text>
				</view>
				<view v-if="medicine.childUse">
					<view class="item-title">【儿童用药】</view>
					<rich-text class="item-content" :nodes="medicine.childUse"></rich-text>
				</view>
				<view v-if="medicine.elderUse">
					<view class="item-title">【老年用药】</view>
					<rich-text class="item-content" :nodes="medicine.elderUse"></rich-text>
				</view>
				<view v-if="medicine.rejection">
					<view class="item-title">【药物相互作用】</view>
					<rich-text class="item-content" :nodes="medicine.rejection"></rich-text>
				</view>
				<view v-if="medicine.overdose">
					<view class="item-title">【药物过量】</view>
					<rich-text class="item-content" :nodes="medicine.overdose"></rich-text>
				</view>
				<view v-if="medicine.toxicology">
					<view class="item-title">【药物毒理】</view>
					<rich-text class="item-content" :nodes="medicine.toxicology"></rich-text>
				</view>
				<view v-if="medicine.dmpk">
					<view class="item-title">【药代动力学】</view>
					<rich-text class="item-content" :nodes="medicine.dmpk"></rich-text>
				</view>
				<view v-if="medicine.storage">
					<view class="item-title">【贮藏】</view>
					<text class="item-content">{{medicine.storage}}</text>
				</view>
				<view v-if="medicine.packge">
					<view class="item-title">【包装】</view>
					<text class="item-content">{{medicine.packge}}</text>
				</view>
				<view v-if="medicine.timeLimit">
					<view class="item-title">【有效期】</view>
					<text class="item-content">{{medicine.timeLimit}}</text>
				</view>
				<view v-if="medicine.approval">
					<view class="item-title">【批准文号】</view>
					<text class="item-content">{{medicine.approval}}</text>
				</view>
				<view v-if="medicine.productionEnte">
					<view class="item-title">【生产企业】</view>
					<text class="item-content">{{medicine.productionEnte}}</text>
				</view>
			</view>
			<!-- <view class="action-section" wx:if="{{biz != 'RX'}}"> -->
			<view class="action-section ">

				<view class="cart-action" @click="cartDetails">
					<uni-badge class="uni-badge-left-margin" :text="amountInCart" absolute="rightTop" size="small">
						<image src="../../static/images/add_to_cart3.png" mode=""></image>
					</uni-badge>

					<text>购物车</text>
				</view>
				<view class="button-action">
					<view class="button-action-item add-to-cart-action" @click="open(1)">
						加入购物车
					</view>
					<view class="button-action-item buy-now-action" @click="open(2)">
						立即购买
					</view>
				</view>
			</view>
			<view>
				<uni-popup ref="popup" type="bottom" border-radius="10px 10px 0 0">
					<view class="drug-amount-box">
						<view style="text-align: right;">
							<uni-icons @click="close" custom-prefix="custom-icon" type="closeempty"
								:size="26"></uni-icons>
						</view>
						<view class="drug-amount-info-box">
							<!-- <image class="drug-thumbnail" src="{{product.image}}" /> -->
							<view class="drug-amount-name-box">
								<text class="medicine-name">{{medicine.name}}</text>
								<text class="specifications"><text class="item-title">规格：</text>
									{{medicine.spec}}</text>
								<text class="price-text-color">￥{{medicine.salePrice}}</text>
							</view>
						</view>
						<view class="drug-amount-select-box">
							<text>数量</text>
							<uni-number-box v-model="vModelValue" :min="1" />
						</view>
						<view class="confirm-button-box">
							<view class="confirm-button" @click='onConfirmDrugAmount'>确定</view>
						</view>
					</view>
				</uni-popup>


			</view>
		</view>

	</view>
</template>

<script>
	import {
		qzApi
	} from '@/config/request.js';
	export default {
		data() {
			return {
				medicine: {},
				vModelValue: 1,
				carType: null,
				amountInCart: 0,
				biz: uni.getStorageSync('biz')
			}
		},

		onLoad(e) {
			this.productData(e.id)
			if (!this.biz == 'RX') {
				this.amountInCartRequest()
			}
		},
		methods: {
			// 返回
			leftFun() {
				uni.switchTab({
					url: "/pages/index/index"
				})
			},
			// 打开弹窗
			open(data) {
				this.$refs.popup.open('bottom')
				this.carType = data;
			},
			// 关闭弹窗
			close() {
				this.$refs.popup.close()
			},
			//商品详情
			async productData(id) {
				try {
					const data = await qzApi.productDetails(id);
					this.medicine = data.data;
				} catch (error) {

				}
			},
			// 购物车
			cartDetails() {
				uni.navigateTo({
					url: "/page1/product/cart?type=2"
				})
			},
			// cartType 1 购物车  2 订单
			async onConfirmDrugAmount() {
				let form = {
					quantity: this.vModelValue,
					skuId: this.medicine.id
				}
				try {
					const data = await qzApi.addToCart(form);
					if (data.code == 0) {
						this.$refs.popup.close()
						if (this.carType == 1) {
							uni.showToast({
								title: '添加成功',
								icon: 'none',
								duration: 2000, //提示的延迟时间，单位毫秒，默认：1500
								mask: false,
								// image:'./image.png',//自定义图标的本地路径
							});
							this.amountInCartRequest()
						} else {
							uni.navigateTo({
								url: "/page1/product/cart?type=2"
							})
						}


					} else {
						uni.showToast({
							title: data.msg,
							icon: 'none',
							duration: 2000, //提示的延迟时间，单位毫秒，默认：1500
							mask: false,
							// image:'./image.png',//自定义图标的本地路径
						});
					}


				} catch (error) {
					// 处理错误
					console.error('获取用户信息失败:', error);
				}
			},
			// 获取购物车中商品数量
			async amountInCartRequest() {
				try {
					const data = await qzApi.getQuantityInCart();
					if (data.code == 0) {
						this.amountInCart = data.data
					}
				} catch (error) {
					console.log('amountInCartRequest error', error)
				}
			},

		}


	}
</script>

<style>
	/* pages/drugDetail/drugDetail.wxss */

	.medicine-detail {
		width: 100%;
		display: flex;
		flex-direction: column;
	}

	.medicine-image {
		background-color: lawngreen;
		width: 100%;
		height: 400rpx;
		/* 可以根据实际图片大小调整 */
		margin-bottom: 10rpx;
	}

	.info-section {
		padding: 20rpx;
		flex: 1;
		margin-bottom: 200rpx;
		display: flex;
		flex-direction: column;
	}

	.medicine-name {
		font-size: 42rpx;
		color: #000;
		margin-bottom: 40rpx;
	}

	.item-content {
		font-size: 30rpx;
		color: #333;
		margin-bottom: 40rpx;
		white-space: pre-line;
	}

	.price {
		margin-bottom: 40rpx;
		font-size: 34rpx;
	}

	.item-title {
		font-size: 34rpx;
		color: #000;
		margin-right: 10rpx;
		margin-top: 30rpx;
	}



	.action-section {
		/* background-color: lightcoral; */
		background-color: #fff;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		padding: 20rpx 20rpx 40rpx 20rpx;
		padding-bottom: env(safe-area-inset-bottom);
		display: flex;
		justify-content: space-between;
		height: 165rpx;
		font-size: 30rpx;
		align-items: center;
	}

	.cart-action {
		/* background-color: lightgreen; */
		width: 80px;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.cart-action image {
		display: block;
		margin: 0 auto;
		width: 50rpx;
		height: 50rpx;
	}

	.button-action {
		display: flex;
	}

	.button-action-item {
		color: #fff;
		width: 250rpx;
		height: 90rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}


	.add-to-cart-action {
		/* border: 1px solid lightgreen; */
		border-radius: 45rpx 0 0 45rpx;
		background: linear-gradient(to right, #ffd01e, #ff8917);
	}

	.buy-now-action {
		/* border: 1px solid rebeccapurple; */
		border-radius: 0 45rpx 45rpx 0;
		background: linear-gradient(to right, #ff6034, #ee0a24);
	}

	.drug-amount-box {
		display: flex;
		flex-direction: column;
		padding: 20rpx;
		background: #fff;
		border-radius: 10px 10px 0 0 !important;
	}

	.drug-amount-info-box {
		/* background-color: lightcoral; */
		display: flex;
		margin-top: 80rpx;
		height: 400rpx;
	}

	.drug-amount-select-box {
		/* background-color: lightgreen; */
		display: flex;
		justify-content: space-between;
		margin-bottom: 20rpx;
	}

	.drug-thumbnail {
		width: 180rpx;
		height: 180rpx;
	}

	.drug-amount-name-box {
		/* background-color: lightgreen; */
		padding: 20rpx;
		display: flex;
		flex-direction: column;
	}

	.confirm-button {
		background: linear-gradient(to right, #ff6034, #ee0a24);
		height: 80rpx;
		border-radius: 40rpx;
		line-height: 80rpx;
		text-align: center;
		color: #fff;

	}

	.action-sheet-close {
		color: #c8c9cc;
		font-size: 50rpx;
		padding: 20rpx;
		position: absolute;
		right: 0;
		top: 0;
	}
</style>